<template>
    <div class="order_mail_detial">
        <Card>
            <Row>
                <Col>
                    <h2 class="mb10">客户信息</h2>
                    <ul class="custom_info">
                        <li><span>金融产品:</span><span>{{customInfo.fnProduct}}</span></li>
                        <li><span>申请编号:</span><span>{{customInfo.camainNo}}</span></li>
                        <li><span>客户姓名:</span><span>{{customInfo.borrowerName}}</span></li>
                        <li><span>业务类型:</span><span>{{customInfo.refData.categorynamename}}</span></li>
                        <li><span>VIN码:</span><span>{{customInfo.vin}}</span></li>
                        <li><span>归档状态:</span><span>{{customInfo.refData.statusfilenamename}}</span></li>
                        <!--<li><span>邮寄次数:</span><span></span></li>-->
                    </ul>
                    <div class="anchored_info" v-show="anchoredType!='0'">
                        <ul>
                            <li v-show="affiiliateInfo.anchoredtypename"><span>挂靠方式:</span><span>{{affiiliateInfo.anchoredtypename}}</span></li>
                            <li v-show="affiiliateInfo.company"><span>公司名称:</span><span>{{affiiliateInfo.company}}</span></li>
                            <li v-show="affiiliateInfo.license"><span>营业执照号码:</span><span>{{affiiliateInfo.license}}</span></li>
                            <li v-show="affiiliateInfo.individualBusiness"><span>个体工商户名称:</span>{{affiiliateInfo.individualBusiness}}<span></span></li>
                            <li v-show="affiiliateInfo.legalPerson"><span>法人姓名:</span><span>{{affiiliateInfo.legalPerson}}</span></li>
                            <li v-show="affiiliateInfo.phone"><span>联系电话:</span><span>{{affiiliateInfo.phone}}</span></li>
                        </ul>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col>
                    <h2 class="mb10">邮寄详情</h2>
                    <Row  v-for="(item,index) in fileList" class="file_info">
                        <Card style="min-height: 168px;">
                            <Col class="mail_info" :span="10">
                                <ul class="over">
                                    <li>
                                        <span>运单编号:</span>
                                        <span>{{item.postNo}}</span>
                                    </li>
                                    <li>
                                        <span>邮寄时间:</span>
                                        <span>{{item.pDate}}</span>
                                    </li>
                                    <li>
                                        <span>邮寄状态:</span>
                                        <span>{{item.status==1?'待邮寄':'已邮寄'}}</span>
                                        <!--5邮寄状态:post.status  1待邮寄2已邮寄-->
                                    </li>
                                    <li>
                                        <span>邮寄发件方:</span>
                                        <span>{{item.refData.puseridname}}</span>
                                    </li>
                                </ul>
                                <!--<Button type="primary">邮寄<span></span>次</Button>-->
                            </Col>
                            <Col class="file_photo" :span="10" :offset="2">
                                <span>邮寄归档</span>
                                <div class="mt10">
                                    <Button type="primary" v-for="(itemChild,indexChild) in item.filetypes">{{itemChild.imcategoryName}}</Button>
                                </div>
                                <div class="mt10">
                                    <img  :src="'data:image/jpeg;base64,'+itemurl"  width="80"  height="80" v-for="(itemurl,itemIndex) in imgurlList" style="margin-right: 10px;"/>
                                </div>
                            </Col>
                        </Card>
                    </Row>
                    <!--<div class="page mt10" style="text-align: right;">-->
                        <!--<Page :current="pageData.pageNumber" :transfer="true" :total="pageData.total" :page-size="pageData.pageSize" @on-change="changePage"-->
                                <!--@on-page-size-change="changePageSize" :page-size-opts="pageSizeOpts" size="small" show-total-->
                                <!--show-elevator show-sizer></Page>-->
                    <!--</div>-->
                </Col>
            </Row>
            <Row v-show="backFileList&&backFileList.legth>0">
                <Col>
                    <h2 class="mb10">退件记录</h2>
                    <Table stripe :columns="backColumns" :data="backFileList" border>
                    </Table>
                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
    import {
        getPostInfoDetail,
        queryanchoredinfo
    } from "_p/afs-apply/api/mail-manage/orderMailList.js";
    export default {
        name:"orderMailDetail",
        data(){
            return {
                fileList:[],
                imgurlList:[],
                pageSizeOpts:[10,20,50,100],
                anchoredType:"",
                cacontractId:"",
                dcpostId:"",
                isNotPost:"",
                applicationNo:"",
                customInfo:{
                    fnProduct:"",//金融产品
                    camainNo:"",//申请编号
                    borrowerName:"",//客户姓名
                    businessType:"",//业务类型
                    vin:"",//vin码
                    refData:{
                        signdealername:"",//
                        categorynamename:"",//案件类别名称
                        statusfilenamename:"",//归档状态名称
                        statusnamename:"",//案件状态名称
                    },
                },
                pageData:{
                    pageNumber:1,
                    pageSize:10,
                    total:0,
                },
                affiiliateInfo:{
                },
                backColumns:[
                    {
                        title: '文件名称',
                        key: 'name'
                    },
                    {
                        title: '退回日期',
                        key: 'backDate'
                    },
                    {
                        title:"退回运单号",
                        key:"bspostNo"
                    },
                    {
                        title:"问题描述",
                        key:"reason",
                    },
                    {
                        title:"问题类型",
                        key:"problemName",
                    },
                ],
                backFileList:[],

            }
        },
        mounted(){
            if (this.afs.getPageParams(this)) {
                let row=this.afs.getPageParams(this).row;
                // console.info("查询的信息："+JSON.stringify(row));
                this.cacontractId=row.cacontractId;
                this.applicationNo=row.camainNo;
                this.postNo=row.postNo;
                // console.log(this.afs.getPageParams(this),"this.afs.getPageParams(this)")
            }
           this.initData();
           this.initanchoredinfo()
        },
        methods:{
            initData(){
                let param={
                    cacontractId:this.cacontractId,
                    // cacontractId:"00001PJEUCZ84000HA1T",
                    applicationNo:this.applicationNo,
                    postNo:this.postNo||'',
                    isEdit:false,
                    isPost:false,
                }
                getPostInfoDetail(param).then(res=>{
                    if(res.code=="0000"){
                        console.info("查询的信息："+JSON.stringify(res.data.backFileList));
                        // 回显客户信息
                        this.customInfo=res.data.contract;
                        this.backFileList = res.data.backFileList;
                        let tempArr=[];
                        // 回显文件信息
                        res.data.post.forEach(item => {
                            let tempObj=item;
                            tempObj.filetypes = [];
                            item.imcategoryList.forEach(itemChid=>{
                                let fileObj={
                                    imcategoryCode:itemChid.imcategoryCode,
                                    imcategoryName:itemChid.imcategoryName
                                }
                                tempObj.filetypes.push(fileObj);
                            })
                            tempArr.push(tempObj)
                        });
                        this.fileList=tempArr;
                        // 回显图片
                        let imgurlList=[];
                        res.data.md5List.forEach((item,index)=>{
                            // const blob = new Blob([item],{ type: 'image/jpeg' })
                            // let imgurl = window.URL.createObjectURL(blob);
                            imgurlList.push(item.md5Byte);
                        })
                        this.imgurlList=imgurlList;
                    }
                })
            },
            // 查询挂靠公司
            initanchoredinfo(){
                let param={
                    applicationNo:this.applicationNo
                }
                queryanchoredinfo(param).then(res=>{
                    if(res.code=="0000"){
                       this.anchoredType=res.data.anchoredType;
                        this.affiiliateInfo=res.data;
                        if(res.data.refData){
                            this.affiiliateInfo.anchoredtypename=res.data.refData.anchoredtypename;
                        }else{
                            this.affiiliateInfo.anchoredtypename="";
                        }
                    }
                })
            },
            changePageSize(size){
                this.pageData.pageSize=size;
                this.$emit('turnPageSize',this.pageData)
            },
            changePage(number){
                this.pageData.pageNumber=number;
                this.$emit('turnPage',this.pageData)
            }
        }
    }
</script>
<style scoped>
    .custom_info,.anchored_info{
        padding-left: 20px;
    }
    .custom_info li,.anchored_info li{
        margin-bottom: 15px;
        float:left;
        width: 33.3%;
    }
    .file_info li{
        margin-bottom: 10px;
    }
</style>
